<!--
 * @Descripttion: 
 * @version: 1.0
 * @Author: wuhao
 * @Date: 2021-08-19 15:08:11
 * @LastEditors: wuhao
 * @LastEditTime: 2021-08-19 17:14:46
-->
<template>
	<div>
		<el-card
			class="box-card"
			:style="{background:color}"
		>
			<div
				slot="header"
				class="clearfix setFlex"
			>
				<el-tag type="info">{{title}}</el-tag>
				<div class="block">
					<el-tooltip
						class="item"
						effect="dark"
						content="更改背景色"
						placement="top-end"
					>
						<el-color-picker
							v-model="color"
                            size="mini"
							show-alpha
						></el-color-picker>
					</el-tooltip>
				</div>
			</div>
			<div
				id="pie-roseType-simple"
				class="chart"
			></div>
		</el-card>
	</div>
</template>

<script>
	export default {
		name: "NDGEMGT",
		data() {
			return {
				title: "当前显示： 南丁格尔玫瑰组件",
				color: "#FFFFFF",
			};
		},
		mounted() {
			this.$nextTick(() => {
				this.drawLine();
			});
		},
		methods: {
			drawLine() {
				// 基于准备好的dom，初始化echarts实例
				let myChart = this.$echarts.init(
					document.getElementById("pie-roseType-simple")
				);
				let option = {
					legend: {
						top: "bottom",
					},
					toolbox: {
						show: true,
						feature: {
							mark: { show: true },
							dataView: { show: true, readOnly: false },
							restore: { show: true },
							saveAsImage: { show: true },
						},
					},
					series: [
						{
							name: "面积模式",
							type: "pie",
							radius: [50, 250],
							center: ["50%", "50%"],
							roseType: "area",
							itemStyle: {
								borderRadius: 8,
							},
							data: [
								{ value: 40, name: "rose 1" },
								{ value: 38, name: "rose 2" },
								{ value: 32, name: "rose 3" },
								{ value: 30, name: "rose 4" },
								{ value: 28, name: "rose 5" },
								{ value: 26, name: "rose 6" },
								{ value: 22, name: "rose 7" },
								{ value: 18, name: "rose 8" },
							],
						},
					],
				};
				// 绘制图表
				myChart.setOption(option);
			},
		},
	};
</script>

<style lang="css" scoped>
</style>